<template>
  <div class="container">
    <!-- 上面部分：搜索框和新增按钮 -->
    <div class="top">
      <el-input
        class="searchBox"
        v-model="searchItem"
        placeholder="搜索"
        @input="changeHandle"
      />
      <el-button type="primary" size="small" @click="goToEditor">
        <el-icon><duyi-icon-plus /></el-icon>
        <el-icon><duyi-icon-user-filled /></el-icon>
      </el-button>
    </div>

    <!-- 下面部分：用户列表 -->
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="age" label="年龄" width="180" align="center" />
      <el-table-column prop="phone" label="联系方式" align="center" />
      <el-table-column prop="" label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="goToDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { useUserStore } from "~/stores";
const store = useUserStore();
const router = useRouter();

await store.fetchUser(); // 发送后端请求，之后本地仓库就有数据了
const userList = computed(() => store.getUserList);

// 页码相关的
const currentPage = ref(1); // 当前页，默认第一页
const pageSize = ref(5); // 每页显示的条数，默认5条
const total = ref(userList.value.length); // 数据总数

const handleCurrentChange = (page) => {
  currentPage.value = page;
};

// 搜索框的值
const searchItem = ref("");
// 根据搜索框的值，搜索后的列表
const searchList = ref([]);

const changeHandle = () => {
  const name = searchItem.value;
  const arr = userList.value.filter((item) => item.name.match(name));
  searchList.value = arr;
  total.value = searchList.value.length;
};

// 看搜索框是否有值，如果有值说明是在搜索，那么显示搜索后的列表
const list = computed(() => {
  if (searchItem.item) {
    // 显示搜索内容
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return searchList.value.slice(start, end);
  } else {
    // 显示全部内容，但是需要根据页码来截取
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return userList.value.slice(start, end);
  }
  // searchItem.value ? searchList.value : userList.value
});

const goToDetail = (item) => {
  // 跳转到详情页
  router.push(`/detail/${item.id}`);
};

const goToEditor = () => {
  // 跳转到编辑页
  router.push("/editor");
};
</script>

<style scoped>
.title {
  margin-bottom: 20px;
  font-weight: 200;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.searchBox {
  width: 400px;
}

/* 添加必要的样式调整 */
.el-header {
  background-color: #333;
  color: white;
  line-height: 60px;
}
.el-menu-demo {
  background-color: transparent;
}

.pagination {
  margin: 30px auto;
  display: flex;
  justify-content: center;
}
</style>
